<template>
  <!--
  查：
    1：定义api
    2:导入
    3：进入页面就调用
    4：存储并渲染
    5：和分页建立关联
      toal数据存储
      页码改变要调用接口（加.sync）
      页容量改变要调用接口（加.sync）
    序号真实化
    页容量持久化
       a:值改变了要存储到浏览器
       b:初始值要获取浏览器存储
  增：
    1：创建新增弹框组件
    2：在父级使用弹框组件
    3：点击新增打开弹框
    4：完成内部布局
    5：部门的处理
       a:el-tree
       b:输入框获取焦点时出现el-tree
       c:获取组织架构数据并渲染
       d:选择部门后，将值加入到输入框，且关闭el-tree
       点击el-tree与el-input以外区域就隐藏el-tree
       使用自定义指令搞定
          点击某dom区域以外，执行一个事件
          document绑定点击事件
          判断点击的dom是否是指令的dom区域内
          如果是指令dom外，执行事件，dom内不做处理
    6：表单验证
    7：定义新增api
    8:导入
    9：表单验证通过后调用
    10：调用成功
       a:提示
       b:关闭弹框
       c:清空表单数据与验证
       d:刷新父级列表数据
  删：
    1：点击删除弹出确定框
    2：定义删除api
    3:导入
    4：点击确定框确定后调用删除api
    5：调用完成
       提示
       刷新列表数据
          注意点：如果页码>1  && 当前页只有一条数据  页码-- 再刷新

   员工批量新增
     1：跳转路由到员工导入页面
         a:创建页面所对应组件
         b:配制路由
         c:跳转
     2:导入页面：点击读取excel
        别人已写好vue组件
           复制过来直接使用
     3:解析出excel数据
     4：调用接口批量新增
          a：定义接口
          b:导入
          c:解析excel数据成功后调用
          d:调用成功返回员工页面
     5：跳转回员工页面

   导出excel:
     1:获取全部数据
     2：将全部数据生成excel
     3:下载

    点击头像生成二维码
      1：创建弹框
      2:点击头像打开弹框
      3：使用qrcode点击打开弹框时生成二维码到弹框内

    员工帐号分配角色：
      1：创建一个分配角色的弹框组件
      2：在父组件使用弹框组件
      3：点击角色打开弹框
      4：弹框组件内显示角色列表
           a:导入接口api
           b:调用获取数据并存储渲染
      5：回显当前帐号已有角色
          如果当前行数据有该角色信息，深拷贝回显
          如果当前行数据没有该角色信息，调用接口获取信息处理
      6：定义帐号修改角色api
      7:导入api
      8:点击确定调用
         调用成功
            提示
            关闭弹框
            清除已勾选
            刷新父级列表（父级列表有展示才刷新）

 -->

  <div v-loading="loading" class="employees">
    <el-card>
      <div class="top">
        <div class="left">
          <i class="el-icon-info" />
          <span>共87条记录</span>
        </div>
        <div class="right">
          <el-button
            type="danger"
            @click="outputExcel"
          >普通excel导出</el-button>
          <el-button type="info">复杂表头excel导出</el-button>
          <el-button
            type="success"
            @click="$router.push('/employees/import')"
          >excel导入</el-button>
          <el-button type="primary" @click="addClick">新增员工</el-button>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="list" border>
        <el-table-column label="序号" width="50px">
          <template v-slot="{ $index }">
            {{ (page.page - 1) * page.size + $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="staffPhoto" label="头像">
          <template v-slot="{ row }">
            <img
              v-imgError
              class="avatar"
              :src="row.staffPhoto"
              alt=""
              @click="imgClick(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" sortable />
        <el-table-column prop="workNumber" label="工号" sortable />
        <!-- formatter相当于过滤器 -->
        <!-- <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          :formatter="formatterFormOf"
        /> -->
        <!-- 过滤器:作用：字符转换，
               注意点：它只能用于{{}}和v-bind,它内部不能使用this
                定义：
                  filters:{
                    方法名(参数){
                      return 值
                    }
                  }
                  调用：
                    {{实参 | 方法名}}
         -->
        <!-- <el-table-column prop="formOfEmployment" label="聘用形式">
          <template v-slot="{ row }">
            <div>
              {{ row.formOfEmployment | filterFormOf }}
            </div>
          </template>
        </el-table-column> -->
        <!-- 自定义指令 -->
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template v-slot="{ row }">
            <div v-formatter:hireType="row.formOfEmployment" />
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间">
          <template v-slot="{ row }">
            <div v-formatTime="row.timeOfEntry" />
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="enableState"
          label="状态"
          :formatter="formatterState"
        /> -->
        <el-table-column prop="enableState" label="状态">
          <template v-slot="{ row }">
            <div v-formatter:workingState="row.enableState" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="$router.push('/employees/detail/' + row.id)"
            >查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">高岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="roleClick(row)">角色</el-button>
            <!-- <el-button
              v-if="
                $store.state.user.userInfo.roles.points.includes(
                  'employees_delBtn'
                )
              "
              type="text"
              @click="delClick(row.id)"
            >删除</el-button> -->
            <!-- <el-button
              v-showBtn="'employees_delBtn'"
              type="text"
              @click="delClick(row.id)"
            >删除</el-button> -->
            <el-button
              v-if="showBtn('employees_delBtn')"
              type="text"
              @click="delClick(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 2, 5, 10, 100, 200, 300, 400]"
          :page-size.sync="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增弹框组件
      ref:
      prop
         v-model
              子组件标签  :vlaue="父组件属性"  @input="父组件属性=$event"
              子组件标签  v-model="父组件属性"
              子组件内
                  props:['value']
                  model:{
                    prop:'value',
                    event:'input'
                  },
                  this.$emit('input',false)
         .sync
    -->
    <!-- <Add ref="add" :value="show" @input="show = $event" /> -->
    <Add ref="add" v-model="show" @getData="getData" />
    <!-- 二维码弹框 -->
    <el-dialog title="图片二维码" :visible.sync="showCode" width="600px">
      <div style="text-align: center">
        <canvas ref="canvas" />
      </div>
    </el-dialog>
    <!-- 分配角色弹框 -->
    <SetRole ref="role" v-model="showRole" />
  </div>
</template>
<script>
import { sysUser, sysUserDelete } from '@/api/employees'
import jsCookie from 'js-cookie'
import employeesData from '@/api/constant/employees'
import Add from './components/add'
// import { export_json_to_excel } from '@/vendor/Export2Excel'
import Qrcode from 'qrcode'
import moment from 'moment'
import SetRole from './components/setRole'
export default {
  components: {
    Add,
    SetRole
  },
  filters: {
    // 限制：不能使用this
    filterFormOf(cellValue) {
      const findItem = employeesData.hireType.find((item) => {
        return item.id === cellValue
      })
      return findItem ? findItem.value : '-'
    }
  },
  data() {
    return {
      showRole: false,
      num: 0,
      showCode: false,
      show: false, // add打开弹框的值
      loading: false,
      list: [],
      page: {
        total: 100,
        page: 1, //	是	1	页码
        size: +jsCookie.get('employees_size') || 1 //	是	10	每页条数
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 页容量改变
    handleSizeChange(size) {
      this.getData()
      jsCookie.set('employees_size', size)
    },
    // 页码改变
    handleCurrentChange() {
      this.getData()
    },
    // 获取员工列表
    async getData() {
      this.loading = true
      const res = await sysUser(this.page)
      this.loading = false
      this.list = res.data.rows
      this.page.total = res.data.total
      console.log('获取员工列表', res)
    },
    // 聘用形式转换方法
    formatterFormOf(row, column, cellValue, index) {
      // row：当前行数据
      // column:当前栏组件内的一些值
      // cellValue：当前项的值
      // index:索引
      // cellValue=1==>正式
      // employeesData.hireType
      // const 返回值=数组.find(item=>{return boolean})  true:返回值就是相应项的item  false:返回值就是undefined
      const findItem = employeesData.hireType.find((item) => {
        return item.id === cellValue
      })
      return findItem ? findItem.value : '-'
    },
    // 状态的转换
    formatterState(row, column, cellValue, index) {
      const findItem = employeesData.workingState.find((item) => {
        return +item.id === cellValue
      })
      return findItem ? findItem.value : '-'
    },
    // 新增点击事件
    addClick() {
      // this.$refs.add.isShow = true
      this.show = true
    },
    // 删除事件
    delClick(id) {
      this.$confirm('您确定删除该内容吗', '温馨提示')
        .then(async() => {
          await sysUserDelete(id)
          this.$message.success('删除成功')
          if (this.page.page > 1 && this.list.length === 1) {
            this.page.page--
          }
          this.getData()
        })
        .catch(() => {})
    },
    // 导出excel
    async outputExcel() {
      // 1:获取所有数据
      const res = await sysUser({
        page: 1,
        size: 9999999
      })
      // 2:数据转换
      // 列出规则
      const rules = {
        姓名: 'username',
        手机号: 'mobile',
        工号: 'workNumber',
        聘用形式: 'formOfEmployment',
        部门: 'departmentName',
        入职时间: 'timeOfEntry',
        状态: 'enableState'
      }
      // 要转换的数据:res.data.rows
      const newData = res.data.rows.map((item) => {
        // return [item.username,item.mobile,item.workNumber]
        const arr = []
        Object.values(rules).forEach((key) => {
          // 入职时间转换
          if (key === 'timeOfEntry') {
            arr.push(moment(item[key]).format('YYYY-MM-DD'))
          } else if (key === 'formOfEmployment') {
            arr.push(this.formatterFormOf('', '', item[key]))
          } else if (key === 'enableState') {
            arr.push(this.formatterState('', '', item[key]))
          } else {
            arr.push(item[key])
          }
        })
        return arr
      })
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      export_json_to_excel({
        header: Object.keys(rules),
        data: newData,
        filename: '员工列表'
      })
    },
    // 头像点击
    imgClick(str) {
      console.log(Qrcode, 'Qrcode')
      if (!str) {
        this.$message.error('没有头像地址')
        return
      }
      this.showCode = true
      // el-dialog内的canvas是在第一次打开弹框后才渲染的，所以我们要等到弹框打开渲染后生成二维码
      this.$nextTick(() => {
        Qrcode.toCanvas(this.$refs.canvas, str, {
          width: 400,
          height: 400
        })
      })
    },
    // 角色点击事件
    roleClick(row) {
      this.showRole = true
      // 调用弹框组件内的获取角色的api
      this.$refs.role.getUserRole(row.id)
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.employees {
  padding: 20px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    border: 1px solid #a5ddff;
    padding: 5px;
    background-color: #e6f7ff;
    i {
      color: #409eff;
    }
  }
}
.page {
  padding-top: 20px;
  text-align: right;
}
.avatar {
  width: 30px;
  height: 30px;
}
</style>
